<template>
  <div class="weibo-card">
    <!-- 微博内容部分 -->
    <div class="weibo-content">{{ weibo.content }}</div>

    <!-- 图片展示部分 -->
    <div
      v-if="weibo.files && weibo.files.length > 0"
      class="weibo-images"
      :class="{
        'single-image': weibo.files.length === 1,
        'double-image': weibo.files.length === 2,
        'four-image': weibo.files.length === 4,
      }"
    >
      <div v-for="(file, index) in weibo.files" :key="file.id" class="weibo-image-item">
        <el-image
          :src="file.url"
          fit="cover"
          class="image-thumbnail"
          :preview-src-list="imageUrlList"
          :initial-index="index"
          :hide-on-click-modal="true"
        />
      </div>
    </div>
    <!--  时间  -->
    <div>
      <span class="text-gray">{{ formatDate(weibo.createTime) }}</span>
    </div>

    <!-- 状态与操作区域 -->
    <div class="weibo-footer">
      <div class="weibo-status">
        <el-tag v-if="weibo.status == 1" type="success" size="small">已发布</el-tag>
        <el-tag v-else type="info" size="small">未发布</el-tag>
        <el-tag v-if="weibo.topFlag == 1" type="success" size="small" class="ml-10">置顶</el-tag>
      </div>
      <div class="weibo-actions">
        <el-button type="primary" size="small" :icon="Edit" @click="$emit('edit', weibo)">
          编辑
        </el-button>
        <el-button
          type="warning"
          size="small"
          :icon="Finished"
          @click="$emit('changeStatus', weibo)"
        >
          {{ weibo.status === 1 ? '下架' : '发布' }}
        </el-button>
        <el-button type="danger" size="small" :icon="Delete" @click="$emit('delete', weibo)">
          删除
        </el-button>
        <el-button type="success" size="small" :icon="Top" @click="$emit('top', weibo)">
          {{ weibo.topFlag === 1 ? '取消置顶' : '置顶' }}
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { Weibo } from '@/types'
  import { Delete, Edit, Finished, Top } from '@element-plus/icons-vue'
  import { computed } from 'vue'

  // 组件属性
  const props = defineProps<{
    weibo: Weibo
  }>()

  // 组件事件
  defineEmits<{
    edit: [weibo: Weibo]
    delete: [weibo: Weibo]
    changeStatus: [weibo: Weibo]
    top: [weibo: Weibo]
  }>()

  // 添加一个日期格式化函数
  const formatDate = (dateString: string) => {
    const date = new Date(dateString)
    const now = new Date()
    const diff = now.getTime() - date.getTime()

    // 小于1分钟
    if (diff < 60 * 1000) {
      return '刚刚'
    }
    // 小于1小时
    if (diff < 60 * 60 * 1000) {
      return `${Math.floor(diff / (60 * 1000))}分钟前`
    }
    // 小于24小时
    if (diff < 24 * 60 * 60 * 1000) {
      return `${Math.floor(diff / (60 * 60 * 1000))}小时前`
    }
    // 小于7天
    if (diff < 7 * 24 * 60 * 60 * 1000) {
      return `${Math.floor(diff / (24 * 60 * 60 * 1000))}天前`
    }

    // 其他情况显示具体日期
    const year = date.getFullYear()
    const month = date.getMonth() + 1
    const day = date.getDate()
    const hour = date.getHours().toString().padStart(2, '0')
    const minute = date.getMinutes().toString().padStart(2, '0')

    // 如果是今年，不显示年份
    if (year === now.getFullYear()) {
      return `${month}月${day}日 ${hour}:${minute}`
    }

    return `${year}年${month}月${day}日 ${hour}:${minute}`
  }

  // 准备图片URL列表用于预览
  const imageUrlList = computed(() => {
    if (!props.weibo.files || props.weibo.files.length === 0) {
      return []
    }
    return props.weibo.files.map(file => file.url)
  })
</script>

<style scoped>
  .weibo-card {
    background-color: #fff;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }

  .weibo-content {
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    margin-bottom: 12px;
    white-space: pre-wrap;
    word-break: break-all;
  }

  .weibo-images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 12px;
    max-width: 600px;
    /* 限制最大宽度 */
  }

  /* 单张图片样式 */
  .weibo-images.single-image {
    grid-template-columns: minmax(0, 240px);
  }

  /* 两张图片样式 */
  .weibo-images.double-image {
    grid-template-columns: repeat(2, minmax(0, 180px));
  }

  /* 四张图片样式 */
  .weibo-images.four-image {
    grid-template-columns: repeat(2, 1fr);
  }

  .weibo-image-item {
    cursor: pointer;
    position: relative;
    padding-bottom: 100%;
    /* 保持1:1的宽高比 */
    overflow: hidden;
    border-radius: 4px;
  }

  .image-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* 为不同图片数量设置不同的最大高度 */
  .single-image .weibo-image-item {
    max-height: 240px;
  }

  .double-image .weibo-image-item,
  .four-image .weibo-image-item {
    max-height: 180px;
  }

  .weibo-images:not(.single-image):not(.double-image):not(.four-image) .weibo-image-item {
    max-height: 160px;
  }

  .weibo-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
  }

  .weibo-status {
    display: flex;
    align-items: center;
  }

  .ml-10 {
    margin-left: 10px;
  }

  .weibo-actions {
    display: flex;
    gap: 8px;
  }

  .text-gray {
    color: var(--el-text-color-secondary);
    font-size: var(--el-font-size-small);
    line-height: 1;
  }
</style>
